<template>
  <div>
    <el-dialog lock-scroll show-close title="选择影片" :close-on-click-modal="false" @open="onOpen()" width="860"
      custom-class="modal" append-to-body top="2vh" :visible.sync="dialogVisible">
      <div class="table_box">
        <el-form ref="formValidate" :model="form" class="tabform" style="">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-input placeholder="请输入电影名称" v-model.trim="form.name" size="small"
                  style="width: 260px; margin-right: 20px" />
                <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
                <el-button type="" @click="reset" size="small">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table ref="table" size="small" v-loading="loding" :data="tableData" @row-click="singleElection">
          <el-table-column label="#" width="40">
            <template slot-scope="scope">
              <el-radio class="radio" v-model="radioData" :label="scope.$index">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="_id" :label="curType != 'menus' ? '电影ID' : '应用ID'" align="center"></el-table-column>
          <el-table-column prop="name" :label="curType != 'menus' ? '电影名称' : '应用名称'"
            :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="img" :label="curType != 'menus' ? '电影图片' : '应用图标'">
            <template slot-scope="scope">
              <img lazy :src="scope.row.img" fit="fill"></img>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="mt20" :current-page="form.page" :page-sizes="[10, 20, 30, 40]" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
        <el-button type="primary" @click="handleSubmit()" size="small">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageApps } from '@/api/appList'
import { pageVideo } from '@/api/videoList'
import { API_BASE_URL } from '@/config/setting';
export default {
  name: 'typeMoviesList',
  data() {
    return {
      total: 0,
      tableData: [],
      dialogVisible: false,
      loding: false,
      currenId: '',
      radioData: '',
      linkId: 0,
      rowData: [],
      imageCache: {}, // 添加图片缓存
      form: {
        page: 1,
        limit: 10,
        name: '',
      },
    };
  },
  props: {
    //表格列表数据
    dataList: {
      type: Array,
      default: () => [],
    },
    // 区分是轮播图还是导航组
    curType: {
      type: String,
      default: ''
    },
    typeTableParams: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    reset() {
      this.handleSearch()
    },
    //开启弹窗
    onOpen() {
      this.form.page = 1;
      this.currenId = '';
      this.mockData();
    },
    handleSearch() {
      this.form.page = 1;
      this.mockData();
    },
    mockData() {
      this.radioData = null;
      this.loding = true
      //导航组
      if (this.curType == 'menus') {
        pageApps(this.form).then(async res => {
          // 修改图片地址使其正确回显
          const updatedData = await Promise.all(res.data.map(async (v) => {
            if (this.imageCache[v.img]) {
              v.img = this.imageCache[v.img];
            } else {
              try {
                const response = await fetch(API_BASE_URL + '/Img?img=' + v.img, {
                  headers: {
                    'Authorization': `${localStorage.getItem("token")}`
                  }
                });
                if (response.ok) {
                  v.img = response.url;
                  this.imageCache[v.img] = response.url; // 更新缓存
                }
              } catch (error) {
                console.error('获取图片时出错:', error);
              }
            }
            return v;
          }));
          this.tableData = res.data;
          this.total = res.count;
        }).finally(() => {
          this.loding = false
        })
      } else if (this.curType == 'bannar') {
        // bannar
        pageVideo(this.form).then(res => {
          this.tableData = res.data;
          this.total = res.count;
        }).catch((error) => {
          console.error(error)
        }).finally(() => {
          this.loding = false
        })
      } else {
        // 大小图
        this.form.name = this.typeTableParams.name
        let params = { ...this.typeTableParams, ...this.form }
        pageVideo(params).then(res => {
          this.tableData = res.data;
          this.total = res.count;
        }).catch((error) => {
          console.error(error)
        }).finally(() => {
          this.loding = false
        })
      }

    },
    singleElection(row) {
      this.linkId = row._id;
      this.rowData = row
    },
    handleSubmit() {
      if (!this.linkId) {
        this.$message.error('请选择一步电影');
        return;
      }
      this.$emit('linkData', this.rowData, this.curType);
      this.dialogVisible = false;
    },
    handleSizeChange(val) {
      this.form.limit = val;
      this.radioData = null;
      this.mockData();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.radioData = null;
      this.mockData();
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  width: 860px !important;
}

::v-deep .modal .el-dialog__body {
  padding: 0 20px !important;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #ddd;
}

::-webkit-scrollbar {
  width: 4px !important;
  /*对垂直流动条有效*/
}

.on {
  background-color: #2d8cf0 !important;
  color: #fff !important;
}

.menu-item {
  position: relative;

  display flex justify-content space-between word-break break-all .icon-box {
    z-index: 3 position absolute right 20px top 50% transform translateY(-50%) display none;
  }

  &:hover .icon-box {
    display: block;
  }

  .right-menu {
    z-index: 10;
    position: absolute;
    right: -106px;
    top: -11px;
    width: auto;
    min-width: 121px;
  }
}

.table_box {
  margin-top: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
  color: #409eff; //节点的字体颜色
}
</style>
